import { HeartOutlined, MailOutlined, MehOutlined, PayCircleOutlined } from "@ant-design/icons";
import { Card, Col } from "antd";
import React, { Fragment } from "react";
import './index.scss'

const HeaderPanel = () => {
    return (
        <Fragment>
            <Col key='key001' lg={6} md={12}>
                <Card className="number-card">
                    <span className="icon-warp" style={{ color: '#a352a6' }}>
                        <HeartOutlined />
                    </span>
                    <div className="card-content">
                        <p className="card-title">关注</p>
                        <p className="card-number">2781</p>
                    </div>

                </Card>
            </Col>
            <Col key='key002' lg={6} md={12}>
                <Card className="number-card">
                    <span className="icon-warp" style={{ color: '#DDA0DD' }}>
                        <MailOutlined />
                    </span>
                    <div className="card-content">
                        <p className="card-title">消息</p>
                        <p className="card-number">1235</p>
                    </div>

                </Card>

            </Col>
            <Col key='key003' lg={6} md={12}>
                <Card className="number-card">
                    <span className="icon-warp" style={{ color: '#FFFF00' }}>
                        <MehOutlined />
                    </span>
                    <div className="card-content">
                        <p className="card-title">粉丝</p>
                        <p className="card-number">888</p>
                    </div>

                </Card>

            </Col>
            <Col key='key004' lg={6} md={12}>
                <Card className="number-card">
                    <span className="icon-warp" style={{ color: '#00FA9A' }}>
                        <PayCircleOutlined />
                    </span>
                    <div className="card-content">
                        <p className="card-title">RMB</p>
                        <p className="card-number">1024</p>
                    </div>

                </Card>

            </Col>
        </Fragment>

    );
}

export default HeaderPanel